import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
import 'package:hand_writing/database/database.dart';
import 'package:provider/provider.dart';

import '../../uril/color.dart';
import '../../uril/date.dart';
import '../../view/index/index_provider.dart';
import 'write_box_provider.dart';
import 'package:hand_writing/database/database.dart';

class WriteBoxPage extends StatelessWidget {
  final Note note; // 👈 你少了这一句声明！
  final AppDatabase appDatabase;

  const WriteBoxPage({Key? key, required this.note, required this.appDatabase})
    : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => WriteBoxProvider(note, appDatabase),
      child: const WriteBoxContent(),
    );
  }
}

class WriteBoxContent extends StatelessWidget {
  const WriteBoxContent({super.key});

  get doNothing => null;

  @override
  Widget build(BuildContext context) {
    final state = context.watch<WriteBoxProvider>().state;
    final provider = context.read<WriteBoxProvider>();

    return Slidable(
      key: ValueKey(state.note.id),
      // startActionPane: ActionPane(
      //   motion: const ScrollMotion(),
      //   // dismissible: DismissiblePane(
      //   //   onDismissed: () {
      //   //     print('Dismissed');
      //   //   },
      //   // ),
      //   children: [
      //     CustomSlidableAction(
      //       onPressed: (context) {
      //         print('collect');
      //       },
      //       backgroundColor: Colors.transparent, // 透明背景以防止遮盖圆角
      //       child: Container(
      //         width: 78,
      //         height: 78,
      //         decoration: BoxDecoration(
      //           shape: BoxShape.circle,
      //           color: ColorUtil.parseColor("#cd625c"),
      //         ),
      //         child: const Icon(Icons.bookmark_border_outlined, color: Colors.white,size: 45,),
      //       ),
      //     ),
      //   ],
      // ),
      endActionPane: ActionPane(
        motion: const ScrollMotion(),
        children: [
          CustomSlidableAction(
            onPressed: (context) {
              print('edit');
              context.read<IndexProvider>().showEdit(
                context,
                context.read<WriteBoxProvider>().state.note,
              );
            },
            backgroundColor: Colors.transparent, // 透明背景以防止遮盖圆角
            child: Container(
              width: 60,
              height: 100,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: ColorUtil.parseColor("#6866d2"),
              ),
              child: const Icon(Icons.edit, color: Colors.white, size: 30),
            ),
          ),
          CustomSlidableAction(
            onPressed: (context) {
              print('Delete');
              context.read<WriteBoxProvider>().delete(context);
            },
            backgroundColor: Colors.transparent, // 透明背景以防止遮盖圆角
            child: Container(
              width: 60,
              height: 60,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: const Color(0xFFFE4A49),
              ),
              child: const Icon(Icons.delete, color: Colors.white, size: 30),
            ),
          ),
        ],
      ),
      child: Padding(
        padding: EdgeInsets.all(20),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(20),
          ),
          child: Padding(
            padding: EdgeInsets.all(20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // if (provider.state.imageUrls.isNotEmpty) ...[
                //   Wrap(
                //     spacing: 8,
                //     runSpacing: 8,
                //     children:
                //         provider.state.imageUrls.map((url) {
                //           return Image.network(
                //             url,
                //             width: 100,
                //             height: 100,
                //             fit: BoxFit.cover,
                //           );
                //         }).toList(),
                //   ),
                //   const SizedBox(height: 8),
                // ],
                LayoutBuilder(
                  builder: (context, constraints) {
                    // provider.state.content
                    const textStyle = TextStyle(
                      fontSize: 18,
                      color: Colors.black,
                    );
                    const maxLines = 5;
                    final textPainter = TextPainter(
                      text: TextSpan(
                        text:
                            context
                                .watch<WriteBoxProvider>()
                                .state
                                .note
                                .content,
                        style: textStyle,
                      ),
                      maxLines: maxLines,
                      textDirection: TextDirection.ltr,
                    );
                    textPainter.layout(maxWidth: constraints.maxWidth);
                    final isOverflowing = textPainter.didExceedMaxLines;
                    return GestureDetector(
                      onTap: () {
                        if (isOverflowing) provider.toggleExpanded();
                      },
                      child: AnimatedCrossFade(
                        firstChild: Text(
                          context.watch<WriteBoxProvider>().state.note.content,
                          style: textStyle,
                          maxLines: maxLines,
                          overflow: TextOverflow.ellipsis,
                        ),
                        secondChild: Text(
                          context.watch<WriteBoxProvider>().state.note.content,
                          style: textStyle,
                          maxLines: null,
                          overflow: TextOverflow.visible,
                        ),
                        crossFadeState:
                            provider.state.isExpanded
                                ? CrossFadeState.showSecond
                                : CrossFadeState.showFirst,
                        duration: const Duration(milliseconds: 300),
                        firstCurve: Curves.easeInOut,
                        secondCurve: Curves.easeInOut,
                        sizeCurve: Curves.easeInOut,
                      ),
                    );
                  },
                ),
                SizedBox(height: !provider.state.isExpanded ? 20 : 40),
                Divider(color: ColorUtil.parseColor("#f5f6f6"), height: 1),
                SizedBox(height: 10),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Align(
                      alignment: Alignment.center,
                      child: Text(
                        DateUtil.formatDateTimeToChinese(
                          provider.state.createdAt,
                        ),
                        style: TextStyle(
                          color: ColorUtil.parseColor("#939397"),
                          fontSize: 14,
                        ),
                      ),
                    ),
                    SizedBox(
                      height: 35,
                      child: PopupMenuButton<String>(
                        icon: Icon(Icons.more_horiz), // “更多”图标
                        onSelected: (String value) {
                          if (value == 'edit') {
                            // 执行编辑操作
                            print("编辑");
                            context.read<IndexProvider>().showEdit(
                              context,
                              context.read<WriteBoxProvider>().state.note,
                            );
                          } else if (value == 'delete') {
                            // 执行删除操作
                            context.read<WriteBoxProvider>().delete(context);
                            print("删除");
                          }
                        },
                        itemBuilder:
                            (BuildContext context) => <PopupMenuEntry<String>>[
                              PopupMenuItem<String>(
                                value: 'edit',
                                child: Row(
                                  children: [
                                    Icon(Icons.edit, color: Colors.black54),
                                    SizedBox(width: 8),
                                    Text('编辑'),
                                  ],
                                ),
                              ),
                              PopupMenuItem<String>(
                                value: 'delete',
                                child: Row(
                                  children: [
                                    Icon(Icons.delete, color: Colors.redAccent),
                                    SizedBox(width: 8),
                                    Text('删除'),
                                  ],
                                ),
                              ),
                            ],
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
